<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-custom {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4">
<!-- 登录卡片 -->
<div class="w-full max-w-md bg-white rounded-2xl shadow-custom overflow-hidden transition-all duration-300 hover:shadow-xl">
    <!-- 顶部装饰条 -->
    <div class="h-2 bg-gradient-blue"></div>

    <!-- 登录表单 -->
    <div class="p-8">
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-800">用户登录</h2>
            <p class="text-neutral-dark mt-2">欢迎回来，请登录您的账户</p>
        </div>

        <form id="loginForm" class="space-y-5">
            <!-- 用户名输入框 -->
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fa fa-user text-gray-400"></i>
                </div>
                <input
                        type="text"
                        id="username"
                        class="block w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                        placeholder="请输入用户名"
                        required
                >
            </div>

            <!-- 密码输入框 -->
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fa fa-lock text-gray-400"></i>
                </div>
                <input
                        type="password"
                        id="password"
                        class="block w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                        placeholder="请输入密码"
                        required
                >
                <button
                        type="button"
                        id="togglePassword"
                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                >
                    <i class="fa fa-eye-slash"></i>
                </button>
            </div>

            <!-- 记住我和忘记密码 -->
            <div class="flex items-center justify-between">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" id="remember" class="sr-only peer">
                    <div class="w-5 h-5 border border-gray-300 rounded peer-checked:bg-primary peer-checked:border-primary transition-colors flex items-center justify-center">
                        <i class="fa fa-check text-white text-xs opacity-0 peer-checked:opacity-100 transition-opacity"></i>
                    </div>
                    <span class="ml-2 text-sm text-gray-600">记住我</span>
                </label>
                <a href="#" class="text-sm text-primary hover:text-secondary transition-colors">忘记密码?</a>
            </div>

            <!-- 登录按钮 -->
            <button
                    type="submit"
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2"
            >
                <i class="fa fa-sign-in mr-2"></i>登录
            </button>

            <!-- 分隔线 -->
            <div class="relative flex items-center my-6">
                <div class="flex-grow border-t border-gray-200"></div>
                <span class="flex-shrink mx-4 text-sm text-gray-500">或者</span>
                <div class="flex-grow border-t border-gray-200"></div>
            </div>

            <!-- 其他登录方式 -->
            <div class="grid grid-cols-3 gap-4">
                <button type="button" class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-weixin text-green-500 text-xl"></i>
                </button>
                <button type="button" class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-qq text-blue-400 text-xl"></i>
                </button>
                <button type="button" class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-github text-gray-800 text-xl"></i>
                </button>
            </div>
        </form>

        <!-- 注册链接 -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600">
                还没有账户? <a href="#" class="text-primary font-medium hover:text-secondary transition-colors">立即注册</a>
            </p>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');

    togglePassword.addEventListener('click', () => {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);

        // 切换图标
        const icon = togglePassword.querySelector('i');
        if (type === 'text') {
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 表单提交处理
    const loginForm = document.getElementById('loginForm');

    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();

        // 获取表单数据
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const remember = document.getElementById('remember').checked;

        // 简单验证
        if (!username || !password) {
            alert('请输入用户名和密码');
            return;
        }

        // 模拟登录请求
        console.log('登录中...');
        console.log('用户名:', username);
        console.log('密码:', password);
        console.log('记住我:', remember);

        // 模拟登录成功
        setTimeout(() => {
            alert('登录成功！即将跳转到首页...');
            // 实际项目中这里会进行页面跳转
            // window.location.href = '/dashboard';
        }, 1000);
    });
</script>
</body>
</html>